
//列表数据

function barEVT(listData,ele){
	var max=0
	for(var i=0;i<listData.length;i++){
		if(max <= listData[i].value){
			max = listData[i].value;
		}
	}
	for(var i=0;i<listData.length;i++){
		//listData[i].per=(listData[i].value/max)*100+"%"
		var value = (listData[i].value/max)*100;
		if(value < 1){
			value = 1;
		}
		listData[i].per = value + "%";
	}
	$(ele).find(".barList").html("")
	for(var j=0;j<listData.length;j++){
		 $(ele).find(".barList").append("<li>"+
		   "<div style='color:#bed8e0'>"+(j+1)+"</div>"+
	       "<div style='color:#bed8e0'>"+listData[j].name+"</div>"+
	       "<div><p class='progressbar_1'>" +
	       "<span class='progress' style=width:"+listData[j].per+"></span>" +
	       	"</p></div>"+
	       "<div style='color:#bed8e0'>"+listData[j].value+"</div>"+
	       "</li>")
	}
}
var listData1=[
	{name:'黄浦区',value:40997,per:0},
	{name:'浦东新区',value:12039,per:0},
	{name:'奉贤区',value:11520,per:0},
	{name:'闸北区',value:8152,per:0},
	{name:'静安区',value:6523,per:0},
	{name:'杨浦区',value:6374,per:0},
	{name:'松江区',value:6330,per:0},
	{name:'青浦区',value:6273,per:0},
	{name:'宝山区',value:5924,per:0},
	{name:'普陀区',value:3952,per:0},
	{name:'嘉定区',value:303,per:0},
	{name:'徐汇区',value:83,per:0},
	{name:'闵行区',value:27,per:0},
	{name:'长宁区',value:4,per:0},
	{name:'虹口区',value:0,per:0},
	{name:'崇明县',value:0,per:0},
	{name:'金山区',value:0,per:0}
]
var listData2=[
	{name:'浦东新区',value:6,per:0},
	{name:'宝山区',value:6,per:0},
	{name:'徐汇区',value:6,per:0},
	{name:'静安区',value:2,per:0},
	{name:'嘉定区',value:1,per:0},
	{name:'普陀区',value:1,per:0},
	{name:'松江区',value:1,per:0},
	{name:'杨浦区',value:1,per:0},
	{name:'长宁区',value:1,per:0},
	{name:'奉贤区',value:0,per:0},
	{name:'虹口区',value:0,per:0},
	{name:'黄浦区',value:0,per:0},
	{name:'闵行区',value:0,per:0},
	{name:'青浦区',value:0,per:0},
	{name:'闸北区',value:0,per:0},
	{name:'崇明县',value:0,per:0},
	{name:'金山区',value:0,per:0}
]
var listData3=[
	{name:'浦东新区',value:225222,per:0},
	{name:'静安区',value:224256,per:0},
	{name:'杨浦区',value:223692,per:0},
	{name:'松江区',value:223692,per:0},
	{name:'闸北区',value:223910,per:0},
	{name:'青浦区',value:223683,per:0},
	{name:'徐汇区',value:78009,per:0},
	{name:'宝山区',value:1919,per:0},
	{name:'黄浦区',value:1522,per:0},
	{name:'普陀区',value:192,per:0},
	{name:'奉贤区',value:69,per:0},
	{name:'嘉定区',value:9,per:0},
	{name:'闵行区',value:4,per:0},
	{name:'长宁区',value:1,per:0},
	{name:'虹口区',value:0,per:0},
	{name:'崇明县',value:0,per:0},
	{name:'金山区',value:0,per:0}
]
var listData4=[
	{name:'网宿科技股份有限公司',value:268123,per:0},
	{name:'上海脉创网络科技有限公司',value:274,per:0},
	{name:'上海国富光启云计算科技股份有限公司',value:256,per:0},
	{name:'上海帝联信息科技股份有限公司',value:256,per:0},
	{name:'上海蓝云网络科技有限公司',value:32,per:0},
	{name:'上海七牛信息技术有限公司',value:32,per:0},
	{name:'上海逸云信息科技发展有限公司',value:19,per:0},
	{name:'上海帝联网络科技有限公司',value:18,per:0},
	{name:'上海云峥科技有限公司',value:8,per:0},
	{name:'上海肇一网络科技有限公司',value:6,per:0},
	{name:'上海华仓通信技术有限公司',value:5,per:0},
	{name:'上海安畅网络科技股份有限公司',value:4,per:0},
	{name:'上海哎媲媲网络技术有限公司',value:4,per:0},
	{name:'上海宽惠网络科技股份有限公司',value:4,per:0},
	{name:'上海思栈网络有限公司',value:4,per:0}
]
var listData5=[
	{name:'网宿科技股份有限公司',value:359276,per:0},
	{name:'上海帝联网络科技有限公司',value:77984,per:0},
	{name:'上海帝联信息科技股份有限公司',value:134,per:0},
	{name:'上海逸云信息科技发展有限公司',value:10,per:0},
	{name:'上海七牛信息技术有限公司',value:8,per:0},
	{name:'上海橙域网络科技有限公司',value:6,per:0},
	{name:'上海哎媲媲网络技术有限公司',value:6,per:0},
	{name:'上海万根网络技术有限公司',value:5,per:0},
	{name:'上海层峰网络科技有限公司',value:4,per:0},
	{name:'上海云熵网络科技有限公司',value:4,per:0},
	{name:'上海脉创网络科技有限公司',value:3,per:0},
	{name:'成都领沃网络技术股份有限公司',value:3,per:0},
	{name:'上海中传网络技术股份有限公司',value:3,per:0},
	{name:'上海优刻得信息科技有限公司',value:3,per:0},
	{name:'上海聆云信息技术有限公司',value:3,per:0}
]
barEVT(listData1,".proCDN") 
barEVT(listData4,".comCDN")

$(".proCDN .tab_classify li").click(function(){
	$(this).addClass("active").siblings().removeClass("active")
	 var n=$(this).index()
	 if(n==0){
		 barEVT(listData1,".proCDN") 
	 }else if(n==1){
		 barEVT(listData2,".proCDN") 
	 }else if(n==2){
		 barEVT(listData3,".proCDN") 
	 }
})
$(".comCDN .tab_classify li").click(function(){
	$(this).addClass("active").siblings().removeClass("active")
	 var n=$(this).index()
	 if(n==0){
		 barEVT(listData4,".comCDN") 
	 }else if(n==1){
		 barEVT(listData5,".comCDN") 
	 }
})


var geoCoordMap={}
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});
var convertData = function (data) {
    var res = [];
    for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
            res.push({
                name: data[i].name,
                value: geoCoord.concat(data[i].value)
            });
        }
    }
    return res;
};
var mapData = [
	{name:'宝山区',value:6},
	{name:'奉贤区',value:0},
	{name:'虹口区',value:0},
	{name:'黄浦区',value:0},
	{name:'嘉定区',value:1},
	{name:'静安区',value:2},
	{name:'闵行区',value:0},
	{name:'浦东新区',value:6},
	{name:'普陀区',value:1},
	{name:'青浦区',value:0},
	{name:'松江区',value:1},
	{name:'徐汇区',value:6},
	{name:'杨浦区',value:1},
	{name:'闸北区',value:0},
	{name:'长宁区',value:1},
	{name:'崇明县',value:0},
	{name:'金山区',value:0}
];
var mapChart = echarts.init(document.getElementById('ec_map_nd'))
mapChart.setOption(getOptionMap(mapData,'企业'))

function getOptionMap(data,type){
	var max=0;
	for(var i=0;i<data.length;i++){
		if(max<data[i].value||max==data[i].value){
			max=data[i].value
		}
	}
	var optionMap = {
		tooltip: {
			trigger: 'item',
			formatter: function(param) {
				var province = param.name;
				return '<div>' + param.name + '</div>' +
					'<div>' + type + '数量：' + param.data.value[2] + '</div>';
			}
		},
		geo: {
			show: true,
			zoom: 1.2,
			roam: false,
			map: '上海',
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#285ac6',
					borderWidth: 1,
					areaColor: '#123082',
					shadowBlur: 3,
					shadowColor: '#081435',
					shadowOffsetX: -4,
					shadowOffsetY: 8
				},
				emphasis: {
					areaColor: '#fce24f',
					borderColor: '#fce24f'
				}
			}
		},
		series: [{
			type: 'map',
			zoom: 1.2,
			mapType: '上海',
			//		geoIndex: 0,
			roam: false,
			label: {
				normal: {
					show: false,
					textStyle: {
						color: '#fff'
					}
				},
				emphasis: {
					show: true,
					textStyle: {
						color: '#fff'
					}
				}
			},
			itemStyle: {
				normal: {
					show: false,
					borderColor: '#3770ea',
					borderWidth: 1,
					areaColor: '#0f2d87'
				},
				emphasis: {
					areaColor: '#2a56bd',
					borderColor: '#2a56bd',
					//				opacity: 0.8,
				}
			},
			data: convertData(data)
		}, {
			name: 'Top 5',
			type: 'effectScatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				return val[2] / max * 10 + 5
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					//            formatter: '{b}',
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			//    data: convertData(mapData)
			data: convertData(data.sort(function(a, b) {
				return b.value - a.value
			}).slice(0, 5))
		}, {
			name: 'Top 5',
			type: 'scatter',
			zlevel: 1,
			coordinateSystem: 'geo',
			symbolSize: function(val) {
				//        return val*4+8;
				return val[2] / max * 10 + 5
			},
			showEffectOn: 'render',
			rippleEffect: {
				brushType: 'stroke'
			},
			hoverAnimation: true,
			label: {
				normal: {
					//            formatter: '{b}',
					position: 'right',
					show: false
				}
			},
			itemStyle: {
				normal: {
					color: '#f4e925',
					shadowBlur: 10,
					shadowColor: '#333'
				}
			},
			//    data: convertData(mapData)
			data: convertData(data.sort(function(a, b) {
				return b.value - a.value;
			}).slice(5))
		}]
	};
	return optionMap;
}
$(".mapChange").change(function(){
    var n = $(this).val();
    var option = null;
    var mapData = null;
    if(n =="企业"){
    	mapData = [
    		{name:'宝山区',value:6},
    		{name:'奉贤区',value:0},
    		{name:'虹口区',value:0},
    		{name:'黄浦区',value:0},
    		{name:'嘉定区',value:1},
    		{name:'静安区',value:2},
    		{name:'闵行区',value:0},
    		{name:'浦东新区',value:6},
    		{name:'普陀区',value:1},
    		{name:'青浦区',value:0},
    		{name:'松江区',value:1},
    		{name:'徐汇区',value:6},
    		{name:'杨浦区',value:1},
    		{name:'闸北区',value:0},
    		{name:'长宁区',value:1},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:0}
    	];
    	option = getOptionMap(mapData,n);
    }else if(n =="域名"){
    	mapData = [
    		{name:'宝山区',value:1919},
    		{name:'奉贤区',value:69},
    		{name:'虹口区',value:0},
    		{name:'黄浦区',value:1522},
    		{name:'嘉定区',value:9},
    		{name:'静安区',value:224256},
    		{name:'闵行区',value:4},
    		{name:'浦东新区',value:225222},
    		{name:'普陀区',value:192},
    		{name:'青浦区',value:223683},
    		{name:'松江区',value:223692},
    		{name:'徐汇区',value:78009},
    		{name:'杨浦区',value:223692},
    		{name:'闸北区',value:223910},
    		{name:'长宁区',value:1},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:0}
    	];
    	option = getOptionMap(mapData,n);
    }else if(n =="IP地址"){
    	mapData = [
    		{name:'宝山区',value:5924},
    		{name:'奉贤区',value:11520},
    		{name:'虹口区',value:0},
    		{name:'黄浦区',value:40997},
    		{name:'嘉定区',value:303},
    		{name:'静安区',value:6523},
    		{name:'闵行区',value:27},
    		{name:'浦东新区',value:12039},
    		{name:'普陀区',value:3952},
    		{name:'青浦区',value:6273},
    		{name:'松江区',value:6330},
    		{name:'徐汇区',value:83},
    		{name:'杨浦区',value:6374},
    		{name:'闸北区',value:8152},
    		{name:'长宁区',value:4},
    		{name:'崇明县',value:0},
    		{name:'金山区',value:0}
    	];
    	option = getOptionMap(mapData,n);
    }
    mapChart.setOption(option);
})

window.addEventListener("resize", function () {
    mapChart.resize();
});
